<template>
  <!-- <div>
    <el-button type="primary" @click="showDialog">添加</el-button>
    <el-button type="primary" @click="delBatch">删除</el-button>
    <el-table :data="arr" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" :selectable="selectable" width="55" />
      <el-table-column label="员工编号" prop="empno" />
      <el-table-column label="员工姓名" prop="ename" />
      <el-table-column label="职位" prop="job" />
      <el-table-column label="入职日期" prop="hiredate" />
      <el-table-column label="薪资" prop="sal" />
      <el-table-column label="部门编号" prop="deptno" />

      <el-table-column align="right">
       
        <template #header>
          <el-input v-model="search" @keyup.enter="find" size="small" placeholder="按照姓名搜索" />
        </template>
        

        
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button size="small" type="warning" @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
        
      </el-table-column>
    </el-table>

    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[5, 10]" :size="size"
      :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper" :total="arrLength"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    当前页码 {{ currentPage4 }}
    每页数据条数 {{ pageSize4 }}


    
    <el-dialog v-model="dialogVisible" title="提示" width="500" :before-close="handleClose">
      <span>是否删除</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="deleteData">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    

   
    <el-dialog v-model="centerDialogVisible" title="编辑" width="500" align-center>

      <el-form :model="emp">
        <el-form-item label="员工编号" :label-width="formLabelWidth">
          <el-input v-model="emp.empno" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="员工姓名" :label-width="formLabelWidth">
          <el-input v-model="emp.ename" autocomplete="off" />
        </el-form-item>
        <el-form-item label="员工职位" :label-width="formLabelWidth">
          <el-input v-model="emp.job" autocomplete="off" />
        </el-form-item>
        <el-form-item label="入职日期" :label-width="formLabelWidth">
          <el-input v-model="emp.hiredate" autocomplete="off" /> 
          <el-date-picker v-model="emp.hiredate" type="date" value-format="YYYY-MM-DD" placeholder="请选择入职日期"
            :size="size" />
        </el-form-item>
        <el-form-item label="员工薪资" :label-width="formLabelWidth">
          <el-input v-model="emp.sal" autocomplete="off" />
        </el-form-item>
        <el-form-item label="部门编号" :label-width="formLabelWidth">

          <el-select v-model="emp.deptno" placeholder="Select" style="width: 240px">
            <el-option v-for="(item, index) in dept" :key="index" :label="item.deptno" :value="item.deptno" />
          </el-select>
        </el-form-item>
      </el-form>


      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="edit">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
 
    <el-dialog v-model="addDialogVisible" title="添加" width="500" align-center>

      <el-form :model="addEmp">
        <el-form-item label="员工姓名" :label-width="formLabelWidth">
          <el-input v-model="addEmp.ename" autocomplete="off" />
        </el-form-item>
        <el-form-item label="员工职位" :label-width="formLabelWidth">
          <el-input v-model="addEmp.job" autocomplete="off" />
        </el-form-item>
        <el-form-item label="入职日期" :label-width="formLabelWidth">
         <el-input v-model="emp.hiredate" autocomplete="off" /> 
          <el-date-picker v-model="addEmp.hiredate" type="date" value-format="YYYY-MM-DD" placeholder="请选择入职日期"
            :size="size" />
        </el-form-item>
        <el-form-item label="员工薪资" :label-width="formLabelWidth">
          <el-input v-model="addEmp.sal" autocomplete="off" />
        </el-form-item>
        <el-form-item label="部门编号" :label-width="formLabelWidth">

          <el-select v-model="addEmp.deptno" placeholder="请选择部门编号" style="width: 240px">
            <el-option v-for="(item, index) in dept" :key="index" :label="item.deptno" :value="item.deptno" />
          </el-select>
        </el-form-item>
      </el-form>


      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="add">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    
  </div> -->
    <!-- <form action="http://localhost:8081/testMybatis/upload" enctype="multipart/form-data" method="post">
    <input type="file" name="myFile"><br>
    <input type="submit" value="上传">
</form> -->
<el-upload class="upload-demo" 
     action="" 
     :auto-upload="false" 
     multiple="true" 
     :on-change="onchange">
    <template #trigger>
      <el-button type="primary">选择文件</el-button>
    </template>

    <el-button class="ml-3" type="success" @click="submitUpload">
      上传
    </el-button>

    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div>
    </template>
  </el-upload>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
//保存要上传的文件
let myFiles = ref([])

//选择文件
let onchange = (file) => {
  myFiles.value.push(file.raw)
  console.log('-------------' + myFiles.value)
}

//上传文件
const submitUpload = () => {
    //跟表单一起上传
    //let formData = new FormData();
   // for (let i = 0; i < myFiles.value.length; i++) {
   //     formData.append('myFiles', myFiles.value[i]);
    //}

    //formData.append('username', insertUser.value.username);
   // formData.append('userpass', insertUser.value.userpass);


   //一个一个上传
  for (let i = 0; i < myFiles.value.length; i++) {
    //手动添加表单，将文件追加到表单里
    let fd = new FormData();
    fd.append('myFiles', myFiles.value[i])

    axios({
      url: 'http://localhost:8081/testMybatis/uploadtodisk',       //上传服务器接口
      //url: 'http://localhost:8088/testMybatis/uploadtodatabase', //上传数据库接口
      method: 'post',
      data: fd,
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
      .then((res) => {
        if (res.data == 'ok') {
          ElMessage({
            message: '上传成功.',
            type: 'success',
          })
        } else {
          ElMessage({
            message: '上传失败.',
            type: 'warning',
          })
        }
      })

  }
}
// import axios from 'axios'
// import qs from 'qs'
// import { ElMessage } from 'element-plus'
// import { onMounted, ref } from 'vue'

// // 批量删除
// const selectable = () => true

// // 存储所有选中的empno
// const multipleSelection = ref([])
// // 一但选中就调用
// const handleSelectionChange = (val) => {
//   multipleSelection.value = val.map(item => item.empno)
//   console.log(multipleSelection.value)
// }

// // 删除按钮
// const delBatch = () => {
//   axios.post(`http://localhost:8080/testServlet/delBatch`,
//     qs.stringify({ empnos: multipleSelection.value }, { arrayFormat: "repeat" }))
//     .then((res) => {
//       if (res.data != null) {
//         ElMessage({
//           message: '删除成功.',
//           type: 'success',
//         })
//         init()
//       } else {
//         ElMessage.error('删除失败.')
//         init()
//       }
//     })
// }

// // 批量删除


// const dialogVisible = ref(false) // 控制删除对话框显示或隐藏的，默认就是隐藏
// const centerDialogVisible = ref(false) // 控制编辑对话框显示或隐藏的，默认就是隐藏
// const addDialogVisible = ref(false) // 控制添加对话框显示或隐藏的，默认就是隐藏

// const currentPage4 = ref(1) // 当前默认页码
// const pageSize4 = ref(5)    // 初始每页数据条数


// let search = ref('') //记录搜索输入内容
// // 搜索框
// const find = () => {
//   console.log(search.value)
//   init()
// }


// let arr = ref([])
// let arrLength = ref(0)

// let init = () => {
//   axios.get(`http://localhost:8080/testServlet/empList?currentPage=${currentPage4.value}&pageSize=${pageSize4.value}&ename=${search.value}`)
//     .then((res) => {
//       console.log(res)
//       arr.value = res.data.list
//       arrLength.value = res.data.totalCount
//       // arr.value = res.data
//       // arrLength.value = arr.value.length // 总共有多少条数据 
//     })
// }


// onMounted(() => { // 页面加载就有数据
//   init() // 运行时就调用获取数据
// })
// let dept = ref([])
// // 查询dept表，要里面的deptno
// let getDept = () => {
//   axios.get(`http://localhost:8080/testServlet/getDept`)
//     .then((res) => {
//       console.log('getDept', res)
//       dept.value = res.data
//     })
// }

// // 点击添加按钮的时候，需要显示对话框和调用getDept()
// let showDialog = () => {
//   addDialogVisible.value = true;
//   getDept();
// }
// let addEmp = ref({})// 添加数据的对象
// // 添加
// let add = () => {
//   axios.post(`http://localhost:8080/testServlet/addEmp`, qs.stringify(addEmp.value))
//     .then((res) => {
//       if (res.data != null) {
//         ElMessage({
//           message: '添加成功.',
//           type: 'success',
//         })
//         addDialogVisible.value = false  // 隐藏对话框
//         init()
//       } else {
//         ElMessage.error('添加失败.')
//         addDialogVisible.value = false  // 隐藏对话框
//         init()
//       }
//     })
// }

// // 删除
// let deleteData = () => {
//   axios.get(`http://localhost:8080/testServlet/del?enpno=${empno.value}`).then((res) => {
//     if (res.data == 1) {
//       ElMessage({
//         message: '删除成功.',
//         type: 'success',
//       })
//       dialogVisible.value = false  // 隐藏对话框
//       init()
//     } else {
//       ElMessage.error('删除失败.')
//       dialogVisible.value = false  // 隐藏对话框
//       init()
//     }
//   })
// }

// const handleSizeChange = (val) => {
//   console.log(`${val}条数据每页`)
//   pageSize4.value = val  // 每切换每页显示数据条数，就更改pageSize4
//   init()  // 一旦页面变化就重新获取数据
// }
// const handleCurrentChange = (val) => {
//   console.log(`当前页码: ${val}`)
//   currentPage4.value = val
//   init()  // 一旦页面变化就重新获取数据
// }



// let emp = ref({}) // 记录点击编辑按钮之后的那行数据
// // 编辑（后台）
// let edit = () => {

//   axios.post(`http://localhost:8080/testServlet/edit`, qs.stringify(emp.value))
//     .then((res) => {
//       if (res.data != null) {
//         ElMessage({
//           message: '修改成功.',
//           type: 'success',
//         })
//         centerDialogVisible.value = false  // 隐藏对话框
//         init()
//       } else {
//         ElMessage.error('修改失败.')
//         centerDialogVisible.value = false  // 隐藏对话框
//         init()
//       }
//     })
// }


// // 点击编辑按钮时候调用
// const handleEdit = (index, row) => {
//   centerDialogVisible.value = true
//   console.log(index, row)
//   getDept()
//   emp.value = row    // js对象可以动态添加属性
// }

// let empno = ref(0) // 删除用的empno
// // 点击删除按钮时候调用
// const handleDelete = (index, row) => {

//   // 点击按钮就显示对话框
//   dialogVisible.value = true

//   console.log(index, row)
//   console.log(row.empno)
//   //deleteData(row.empno)

//   empno.value = row.empno
// }




</script>